<template>
    <div class="pop" @touchmove.prevent v-if="!showPop">
        <div class="pop-main" @click="goReg">
            <div class="pop-main-btn">
                <span @click.stop="closeInfo">规则</span>
            </div>
            <div class="pop-main-reg">
                <p>
                    注册会员后，即可得￥<span class="pop-main-reg-price">50</span>元旅行红包。
                </p>
                <p>
                    邀请好友，还可以得更多旅行红包。
                </p>
            </div>
        </div>
        <img class="pop-close" @click="closePop" src="../assets/pop-close.png" alt="">

        <div class="pop-info" v-if="infoShow">
            <span class="pop-info-close" @click="closeInfo">×</span>
            <h3 class="pop-info-title">规则</h3>
            <div  class="pop-info-main">
                <p>1.新人旅行红包，仅限从未在商城注册的用户领取，仅限本商城有效。</p>
                <p>2.领取红包必须先注册成商城会员。</p>
                <p>3.红包金额和有效期以实际到账为准。</p>
                <p>4.请在 我的 - 旅行红包 查看详细信息。</p>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import { mapState } from 'vuex'
    import store from "../store/store"

    export default {
        name: "Pop",
        data(){
            return{
                infoShow:false,
                //  showPop:false,
            }
        },
        watch:{
            appNestState(newVal,oldVal){
                if(!!newVal){
                //   this.showPop = false;
                    store.commit('setshowPop', true);
                }
            },
　　　　　},
        computed: mapState({
            appNestState: state => state.appNestState,
            token: state => state.token,
            showPop: state => state.showPop,
        }),
        mounted(){
            if(this.appNestState) {
                //  this.showPop = false;
                store.commit('setshowPop', true);
            }else{
                if(!!sessionStorage.firstNoLogin || !!this.token){
                //    this.showPop = false;
                    store.commit('setshowPop', true);
                }else{
                 //   this.showPop = true;
                    store.commit('setshowPop', false);
                //    store.commit('setshowPop', true);
                }
                sessionStorage.firstNoLogin = false;
            }

            if(this.$route.path=='/My-ticket-other-FL/'){ //如果在飞拉页面则不显示
                store.commit('setshowPop', true);
                console.log(this.$route.path)
            }
            
        },
        methods:{
            closeInfo(){
                this.infoShow=!this.infoShow;
            },
            closePop(){
                this.$emit('closePop',false)
            },
            goReg(){
                this.$emit('closePop',false);
                this.$router.push('/my')
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";
    .pop{
        position: fixed;
        z-index: 10002;
        top:0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,.5);
        box-shadow: 0 0 rpx(20) #666;
        min-height: 100%;
        &-main{
            position: absolute;
            top:rpx(225);
            left: 50%;
            margin-left:rpx(-250);
            background-image: url(../assets/pop-bg-new.png);
            background-size: 100%;
            width: rpx(500);
            height: rpx(672);
            border-radius: rpx(10);
            &-btn{
                display: none;
                margin-top: rpx(460);
                text-align: center;
                color: #fbfd68;
                span{
                    display: inline-block;
                    padding: rpx(10) rpx(20);
                    border-radius: rpx(10);
                    background: #df112e;
                }
            }
            &-reg{
                display: none;
                margin-top: rpx(38);
                text-align: center;
                font-size: rpx(26);
                color: #fbfd68;
                &-price{
                    font-size: rpx(58);
                    font-style: italic;
                }
                p{
                    line-height: 1.2;
                }
            }
        }
        &-close{
            position: absolute;
            left: 10%;
            top: rpx(940);
            margin-left: rpx(250);
            width: rpx(80);
            height: rpx(80);
            cursor: pointer;
        }
        &-info{
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 10001;
            margin-left: rpx(-300);
            margin-top: -25%;
            box-shadow: 0 0 rpx(20) #666;
            border-radius: rpx(10);
            background: #fff;
            width:rpx(600);
            &-title{
                padding: rpx(20) 0;
                text-align: center;
                font-size: rpx(32);
                font-weight: normal;
                border-bottom: 1px solid $color2 ;
            }
            &-close{
                display: block;
                float: right;
                padding: 0 rpx(10);
                font-size: rpx(42);
                cursor: pointer;
            }
            &-main{
                padding:rpx(30);
                line-height: 160%;
            }
        }
    }
</style>
